<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ks</title>
    <link rel="stylesheet" href="http://127.0.0.1:10086/static/css/ke.css">
    <script src="http://127.0.0.1:10086/static/echarts/echarts.js"></script>
    <script src="http://127.0.0.1:10086/static/echarts/ecStat.js"></script>
</head>
<body>
<!-- 首屏主要内容 -->
<div id="container">
    <div id="main">
        <h1 id="top">可视化系统</h1>
        <div id="left">
            <ul class="yi">
                <li>
                    <a href="/">数据源</a>
                </li>
                <li class="active">
                    <a href="">可视化</a>
                </li>
            </ul>
        </div>

        <div id="right">
            <div id="title">
                <h2 class="title_font">可视化</h2>
            </div>
            <!-- 图表 -->
            <div class="raw-chart">
                    <ul>
                        <ol class="chartList" id="chartlist">
                            <h4>原始数据可视化</h4>
                            <li class="active">散点图</li>
                            <li>折线图</li>
                            <li>条形图</li>
                        </ol>

                        <ol class="funcList">
                            <h4>自动匹配算法</h4>
                            <h5><a href="">分类算法</a></h5>
                            <li><a href="">逻辑回归</a></li>
                            <li><a href="">分类树</a></li>
                            <li><a href="">KNN分类</a></li>
                            <li><a href="">支持向量机</a></li>
                            <h5>回归算法</h5>
                            <li><a href="">KNN回归</a></li>
                            <li><a href="">线性回归</a></li>
                        </ol>
                    </ul>
                <!-- 显示Echarts -->
                <div class="chart-area">
                    <div id="chartShow">echarts</div>
                </div>
                <!-- 显示结果 -->
                <div class="chart-area2">
                    <img src="" id="reImg">
                </div>
                <div class="message">
                        <h4>当前数据信息</h4>
                        <h5 id="kh">数据名称：</h5>
                        <p id="fileName">未命名数据源</p>
                        <h5 id="kh2">数据类型：</h5>
                        <h5>简介：</h5>
                        <p id="fileSay">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        </p>
                </div>
            </div>

            <!-- 表格 -->
            <div class="showtable">
                <h3 class="table-area">表格展示</h3>
                 <ul class="process">
                    <li>提交并预处理</li>
                    <li>进行训练</li>
                </ul>
                <div class="table" id="tableshow"></div>
            </div>

        </div>
    </div>


</div>
</body>
<script th:inline="javascript">
    mychart1 = echarts.init(document.getElementById("chartShow"))

    //绘制折线图
    function lineOption(xdata, data) {
        option = {
            grid: {
                width: '50%'
            },
            xAxis: {
                type: 'category',
                data: xdata
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'line'
                }
            ]
        };
        return option;
    }
    //绘制散点图
    function ScatterOption(data) {
        option = {
            grid: {
                width: '50%'
            },
            xAxis: {},
            yAxis: {},
            series: [
                {
                    symbolSize: 4,
                    data: data,
                    type: 'scatter'
                }
            ]
        };
        return option
    }
    //绘制散点图
    function ScatterOption2(data,data2) {
        option = {
            grid: {
                width: '50%'
            },
            xAxis: {},
            yAxis: {},
            series: [
                {
                    symbolSize: 4,
                    data: data,
                    type: 'scatter'
                },
                {
                    symbolSize: 4,
                    color: "#0cc00c",
                    data: data2,
                    type: 'scatter'
                }
            ]
        };
        return option
    }
    //绘制柱状图
    function BarOption(xdata,data) {
        option = {
            grid: {
                width: '50%'
            },
            xAxis: {
                type: 'category',
                data: xdata
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'bar'
                }
            ]
        };
        return option;
    }
    // 生成表格
    function createTable(array1,array2) {

        var table = '<table border="2px" bgcolor="#6495ed">',
            allRows = array1;
            allRows2 = array2;

        for (var singleRow = 0; singleRow < 19; singleRow++) {
            table += '<tr>';
            table += '<td width="300px" height="100px" style="text-align: center;font-size: 30px">';
            table += allRows[singleRow];
            table += '</td>';
            table += '<td width="300px" height="100px" style="text-align: center;font-size: 30px">';
            table += allRows2[singleRow];
            table += '</td>';
            table += '</tr>';
        }
        table += '</table>';
        document.getElementById('tableshow').innerHTML = table;
    }

    //--------------------获取相关数据--------------------
    var dataset = [[${result}]]; <!--接收值-->
    dataset = eval("(" + dataset + ")")

    //--------------------绘制原始数据图--------------------
    var setX,setX2
    var setY,setY2
    var sdata=new Array()
    var sdata2=new Array()
    model=dataset.algorithmModel
    if (model=="linear"){
        setX = dataset.Original_data_x
        setY = dataset.Original_data_y
    }else if(model=="logistic"){
        setX = dataset.sepallength_x_zero
        setY = dataset.sepalwidth_y_zero
    }else if (model=="knn"){
        childSet = dataset.rootwidth_and_rootlength
        var x = new Array()
        var y = new Array()
        for (i=0;i<childSet.length;i++){
            x[i] =childSet[i][0]
            y[i]=childSet[i][1]
        }
        setX = x
        setY = y
    }else if (model=="svm"){
        setX = dataset.type1_x
        setY = dataset.type1_y
        setX2 = dataset.type2_x
        setY2 = dataset.type2_y
    }else{
        childSet = dataset.X
        var x = new Array()
        for (var i = 0; i <childSet.length ; i++) {
            x[i]=childSet[i][8]
        }
        setX = x
        setY = dataset.y
    }

    if (model=="svm"){
        for (i=0;i<setX.length;i++){
            var cellData = []
            var cellData2 = []
            cellData[0]=setX[i]
            cellData[1]=setY[i]
            cellData2[0]=setX2[i]
            cellData2[1]=setY2[i]
            sdata.push(cellData)
            sdata2.push(cellData2)
        }
        mychart1.setOption(ScatterOption2(sdata,sdata2),true)
    }else {
        for (i=0;i<setX.length;i++){
            var cellData = []
            cellData[0]=setX[i]
            cellData[1]=setY[i]
            sdata.push(cellData)
        }
        mychart1.setOption(ScatterOption(sdata),true)
    }


    //点击左侧目录，切换图
    var pro = document.getElementById('chartlist').getElementsByTagName("li")
    pro[0].onclick = function () {
        if (model=="svm"){
            mychart1.setOption(ScatterOption2(sdata,sdata2),true)
        }else {
            mychart1.setOption(ScatterOption(sdata),true)
        }
        pro[0].className='active'
        pro[1].className='none'
        pro[2].className='none'
    }

    pro[1].onclick = function () {
        mychart1.setOption(lineOption(setX,setY),true)
        pro[0].className='none'
        pro[1].className='active'
        pro[2].className='none'
    }

    pro[2].onclick = function () {
        mychart1.setOption(BarOption(setX,setY),true)
        pro[0].className='none'
        pro[1].className='none'
        pro[2].className='active'
    }

    //--------------------------绘制表格----------------------------
    var mytable = document.getElementById("tableshow")
    createTable(setX,setY)



    //-----------------------绘制结果图--------------------
     var flag = dataset.algorithmModel
     var p =  document.getElementById("reImg")
     var h = document.getElementById('kh')
     var h2 = document.getElementById('kh2')
     var f = document.getElementById('fileName')
     var p2 =document.getElementById("fileSay")
     if (flag == "linear"){
         h.innerText="数据集：房价集"
         h2.innerText='数据类型：csv'
         f.innerText="文件名：housing"
         p2.innerText="使用了线性回归算法"
         p.setAttribute("src","/static/images/linear/result_1.png");
     }else if (flag=="knn"){
         h.innerText="数据集：tree集"
         h2.innerText='数据类型：csv'
         f.innerText="文件名：tree"
         p2.innerText="使用了knn算法"
         p.setAttribute("src","/static/images/knn/result.png");
     }else if (flag=="svm"){
         h.innerText="数据集：乳腺癌集"
         h2.innerText='数据类型：csv'
         f.innerText="文件名：cancer"
         p2.innerText="使用了svm算法"
         p.setAttribute("src","/static/images/svm/result.png");
     }else if (flag=="logistic"){
         h.innerText="数据集：简化鸢尾花集"
         h2.innerText='数据类型：csv'
         f.innerText="文件名：iris"
         p2.innerText="使用了逻辑回归算法"
         p.setAttribute("src","/static/images/logistic/result_1.png");
     }else {
         h.innerText="数据集：森林火灾集"
         h2.innerText='数据类型：csv'
         f.innerText="文件名：forestfires"
         p2.innerText="使用了cart算法"
         p.setAttribute("src","/static/images/cart/result.png");
     }

</script>

</html>